<template>
	<view class="notice-box" v-if="notice.title">
		<m-block gap="16 24" radius="10" className="flex-between" >
			<m-icon type="icon-yangshengqi" wh="28" ></m-icon>
			<view class="notice-content otw" @click="isShow = true">
				{{notice.title || '暂无新内容'}}
			</view>
			<m-icon type="icon-_fenlei" wh="34" spa="0 0 0 15" @click="Jump('/pagesA/news/list/list?code=notice')"></m-icon>
		</m-block>

		<uni-popup ref="popup" type="center">
			<view class="popup-box">
				<image class="noticeTop" src="../../../../static/images/UI/notice.png"></image>
				<m-block radius="20" gap="50" class="popupBox">
					<view class="_title text-center  otp2">
						{{notice.title}}
					</view>
					<view class="_content " v-html="notice.content"></view>
				</m-block>
				<view class="_close" @click="onClose">
					<m-icon type="icon-tianjia-kongyuan" wh="42" color="#fff" rotate="45"></m-icon>
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	import { GetNewsPage } from "@/api/News.js"
	import { mapState } from 'vuex'
	export default {
		name: 'm-notice',
		data() {
			return {
				code: '',
				typeid: 1,
				notice: {
					title: '',
					content: '',
				},
				isShow: false,
			};
		},
		// props: {
		// 	isShow: {
		// 		type: Boolean,
		// 		default: false,
		// 	},
		// },
		watch: {
			isShow(val) {
				if (val) {
					this.$refs.popup.open()
				} else {
					this.$refs.popup.close()
				}
			},
		},
		computed: {
			...mapState({
				userinfo: state => state.user.userinfo,
			}),
		},
		onShow() {

		},
		mounted() {
			
			this.getNotice();
		},
		methods: {
			async getNotice() {
				await this.sleep(500)
				const { success, totalCount, msg, list, pageCount } = await GetNewsPage({
					code: 'notice',
					pageIndex: 1,
					pageSize: 1,
				});
				if (list.length == 0) {
					return
				}
				this.notice = list[0];
				if (this.openNotice(this.notice.id)) {
					this.isShow = true;;
				}
			},
			onClose() {
				this.isShow = false;
			}
		},

	}
</script>

<style lang="scss">
	.notice-box {
		margin-bottom: 20rpx;
		.notice-content {
			flex: 1;
			text-align: left;
			margin-left: 20rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #222;
		}
	}

	.popup-box {
		width: 600rpx;
		
		border-radius: 28rpx;

		.noticeTop {
			display: block;
			width: 100%;
			position: relative;
			z-index: 999;
			top: 10px;
			height: 230rpx;
		}

		.popupBox {
			background: #fff;
			position: relative;
			overflow: auto;
			min-height: 400rpx;
			max-height: 45vh;

			._title {
				padding-bottom: 30rpx;
				font-size: 28rpx;
			}

			._content {
				text-align: left;
				font-size: 26rpx;

				/deep/ img {
					margin: 16rpx 0rpx;
					width: 100%;
				}
			}

		}

		._close {
			position: absolute;
			bottom: -60rpx;
			left: 50%;
			transform: translate(-50%);
		}
	}
</style>